<script setup lang="ts">
import formButton from '@renderer/components/formButton.vue'
import useCompute from '@renderer/composables/useCompute'
import useComputeForm from '@renderer/composables/useComputeForm'
import { useRouter } from 'vue-router'
import helper from '@renderer/utils/helper'
import { ElMessage } from 'element-plus'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const handleCostBalance = (item: CostInfo) => {
  window.api.closeWindow('costBalance', 'destroy')
  window.api.openWindow('costBalance', {
    title: '结算单',
    name: item.name,
    calculate_id: pageQuery.calculate_id,
    calculate_name: pageQuery.calculate_name,
    house_number: pageQuery.house_number,
    house_type: pageQuery.house_type,
  })
}
const initPage = async () => {
  await getCalculateDetail({ calculate_id: pageQuery.calculate_id })
  if (calculateInfo.value?.check_gather == 2 || !checkRule('成本明细查看权')) {
    ElMessage({ type: 'error', message: '抱歉！您没有此权限' })
    return
  }
  await getCostList({
    calculate_id: pageQuery.calculate_id,
    client_type: 'GUI',
  })
}
const { costList, getCostList } = useCompute()
const { calculateInfo, getCalculateDetail } = useComputeForm()
const { checkRule } = helper()
await initPage()
window.api.refCostData(async () => {
  await initPage()
  ElMessage({ type: 'success', message: '修改成功!' })
})
</script>

<template>
  <main class="bg-white flex flex-col" style="height: -webkit-fill-available">
    <div class="flex flex-1 justify-center" v-if="calculateInfo?.check_gather == 2 || !checkRule('成本明细查看权')">
      <el-empty
        image="https://cw3.obs.cn-north-4.myhuaweicloud.com/api/uploads/images/b1ed1d14709b890118b4c2b3da9114b351e11b9d.png"
        description="抱歉！您没有此权限" />
    </div>
    <section v-else class="flex flex-col overflow-hidden">
      <div class="px-6 h-[50px] border-b flex items-center bg-white" style="width: -webkit-fill-available">
        <div class="flex gap-3">
          <formButton>导出</formButton>
        </div>
      </div>
      <div class="flex flex-col gap-3 p-6 pt-4 overflow-y-auto flex-1">
        <div class="flex flex-col">
          <div class="text-center font-bold text-2xl text-black mb-1">成本明细表</div>
          <div class="text-center text-sm text-[#888888]">工程地址：{{ pageQuery.calculate_name }}</div>
        </div>
        <div class="flex flex-col gap-1">
          <div class="font-bold text-base text-black">项目支出(总预计：{{ costList?.predict }})</div>
          <div class="flex flex-col gap-5">
            <div class="flex flex-col gap-1" v-for="(item, index) in costList?.list" :key="index">
              <span class="text-sm text-black"> {{ index + 1 }}、{{ item.name }}</span>
              <el-table
                :data="item.list"
                border
                header-align="center"
                :header-cell-style="{ background: '#FFF4E5', fontSize: '14px', color: '#888', fontWeight: '400' }">
                <el-table-column type="index" label="序号" align="center" width="55" />
                <el-table-column prop="name" label="项目名称" align="center" />
                <el-table-column prop="unit" label="单位" align="center" />
                <el-table-column prop="value" label="数量" align="center" />
                <el-table-column prop="predict" label="预计" align="center" />
                <el-table-column label="结算单" align="center" width="150">
                  <template #default="scope">
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="handleCostBalance(scope.row)"
                      v-if="scope.row.name != '小计'">
                      查看结算单
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  padding-bottom: 0 !important;
}
.save-button {
  @apply text-white px-16 py-3 rounded-md cursor-pointer;
  background: linear-gradient(142deg, #ff9600 0%, #ffb242 100%);
}
</style>
